<template>
  <div id="leaderboardView">
    <!--搜索用户-->
    <a-form :model="searchParams" layout="inline" class="searchUserForm">
      <a-form-item field="userAccount" label="账号" tooltip="精确匹配">
        <a-input
          v-model="searchParams.userAccount"
          placeholder="请输入用户账号"
          allow-clear
        />
      </a-form-item>
      <a-form-item>
        <a-button
          type="outline"
          shape="round"
          status="normal"
          @click="doSearch"
        >
          搜索
        </a-button>
      </a-form-item>
    </a-form>
    <!--题目表格-->
    <a-table
      :columns="columns"
      :data="leaderboardData"
      :pagination="pagination"
      @page-change="onPageChange"
      column-resizable
    >
      <!--排名-->
      <template #leaderBoard="{ record, rowIndex }">
        <a-tag color="gold" v-if="rowIndex + 1 == 1">
          <template #icon>
            <icon-trophy />
          </template>
          {{ rowIndex + 1 }}
        </a-tag>
        <a-tag color="red" v-else-if="rowIndex + 1 == 2"
          >{{ rowIndex + 1 }}
        </a-tag>
        <a-tag color="blue" v-else-if="rowIndex + 1 == 3"
          >{{ rowIndex + 1 }}
        </a-tag>
        <em v-else>{{ rowIndex + 1 }}</em>
      </template>
      <!--用户头像-->
      <template #userAvatar="{ record }">
        <a-avatar v-if="record.userVO.userAvatar">
          <img :src="record.userVO.userAvatar" alt="" />
        </a-avatar>
        <a-avatar v-else>
          <IconUser />
        </a-avatar>
      </template>
      <!--通过率-->
      <template #passingRate="{ record }">
        <strong> {{ (record.passRate * 100).toFixed(2) * 1 + "%" }}</strong>
        {{ `(${record.passCount + "/" + record.submitCount})` }}
      </template>
      <!--HOJ年龄-->
      <template #hojAge="{ record }">
        <!--当前日期减去用户注册日期,得出天数-->
        <strong>
          {{ dayjs().diff(dayjs(record.userVO.createTime), "day") }}
        </strong> 天
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watchEffect } from "vue";
import { useRouter } from "vue-router";
import { Message } from "@arco-design/web-vue";
import { QuestionControllerService } from "../../generated";
import dayjs from "dayjs";

const router = useRouter();

// 表格列
const columns = [
  {
    slotName: "leaderBoard",
    title: "排名",
    align: "center",
    width: 80,
  },
  {
    slotName: "userAvatar",
    title: "头像",
    align: "center",
  },
  {
    dataIndex: "userVO.userName",
    title: "昵称",
    align: "center",
  },
  {
    dataIndex: "userVO.userProfile",
    title: "个性签名",
    align: "center",
    ellipsis: true,
  },
  {
    slotName: "passingRate",
    title: "正确率",
    align: "center",
    sortable: {
      sortDirections: ["ascend", "descend"],
    },
  },
  {
    slotName: "hojAge",
    title: "HOJ年龄",
    align: "center",
  },
];

// 搜索表单
const searchParams = ref({
  current: 1,
  pageSize: 10,
  userAccount: null,
});

// 分页结果参数
let pagination = reactive({
  showTotal: true,
  current: 0,
  pageSize: 0,
  total: 0,
});

// 数据列表
let leaderboardData = ref();

/**
 * 加载排行榜数据
 */
const loadLeaderboardData = async () => {
  const res = await QuestionControllerService.getLeaderboardUsingPost(
    searchParams.value as any
  );
  if (res.code === 0) {
    leaderboardData.value = res.data?.records;
    // 分页结果参数赋值
    pagination.total = Number((res.data as any).total);
    pagination.current = Number((res.data as any).current);
    pagination.pageSize = Number((res.data as any).size);
  } else if (res.code === 40400) {
    Message.info(res.message);
  } else {
    Message.error("获取排行榜数据失败");
  }
};

/**
 * 搜索
 */
const doSearch = () => {
  // 这里需要重置页号，不然你在第二页搜索第一页的内容，会搜不到
  searchParams.value = {
    ...searchParams.value,
    current: 1,
  };
};

/**
 * 页码改变时触发
 * @param page 当前页码
 */
const onPageChange = (page: number) => {
  searchParams.value = {
    ...searchParams.value,
    current: page,
  };
};

/**
 * 监听 () => { } 中的内容，
 * 内容中的变量（例如searchParams）发生改变时会再次触发() => { }中的内容（即loadData()重新加载数据）
 */
watchEffect(() => {
  loadLeaderboardData();
});
</script>

<style scoped>
/*搜索用户表单*/
.searchUserForm {
  justify-content: end;
}
</style>